// 头部组件
<template>
  <div id="header">
    <div class="text">
      <h1>{{headerText}}</h1>
      <i class="cubeic-back" v-show="backFlag" @click="back"></i>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    headerText: {
      type: String,
      default: '文本'
    },
    backFlag: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>
<style lang="stylus" scoped>
#header
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #ffffff
  display: flex
  align-items: center
  box-shadow: 0 0px 6px #ccc
  .text
    flex-grow: 1
    text-align: center
    position: relative
    min-height: 44px
    line-height: 44px
    h1
      font-size: 16px
      font-weight: 700
    i
      position: absolute
      top: 0
      left: 0
      padding: 0 15px
      color: #fc9153
</style>
